<template>
  <div class="edit-popup">
    <popup
            ref="popupRef"
            :title="'编辑商品'"
            :async="true"
            width="700px"
            @confirm="handleSubmit"
            @close="handleClose"
    >
      <el-form
              class="your-form-class"
              label-width="150px"
              ref="formRef"
              :model="formData"
              
      >
        <el-form-item label="商品名称" prop="channel_id">
          <el-input v-model="formData.name" placeholder="请输入商品名称"   class="max-w-[300px]"/>
        </el-form-item>
		<el-form-item label="商品封面图片" prop="pic" >
		  <el-image style="width: 100px; height: 100px" :src="formData.pic" />
		</el-form-item>
		<el-form-item label="" prop="pic" >
		  <div>
			  <upload
			      class="mr-3"
			      :type="'image'"
			      :show-progress="true"
			      @change="actionImg"
			      ref="myref"
			  >
			    <el-button type="primary">本地上传</el-button>
			  </upload>
		  </div>
		</el-form-item>
        <el-form-item label="现价" prop="name" >
          <el-input v-model="formData.price" placeholder="请输入现价"   class="max-w-[300px]"/>
        </el-form-item>
        <el-form-item label="商品路径" prop="name" >
          <el-input v-model="formData.buy_url" type="textarea"  :autosize="{ minRows: 2, maxRows: 4 }" placeholder="商品路径"   class="max-w-[300px]"/>
        </el-form-item>
       
        
      </el-form>
    </popup>
  </div>
</template>
<script lang="ts" setup>
  import type { FormInstance } from "element-plus";
  import { editGoodsMz,detailGoodsMz } from '@/api/live'
  import Popup from "@/components/popup/index.vue";
  const emit = defineEmits(["success", "close"]);
  const formRef = shallowRef<FormInstance>();
  const popupRef = shallowRef<InstanceType<typeof Popup>>();
  const myref = ref(null)


  const formData  = reactive({
    goods_mz_id: '',
    name: '',
    pic: '',
    price: '',
	desc:'',
	buy_url:''
  });

  const open = () => {
    popupRef.value?.open();
  };

  const setFormData = (id:string) => {
	  detailGoodsMz({goods_mz_id:id}).then((res) => {
		  console.log(res.info)
		  formData.goods_mz_id = res.info.id
		  formData.name = res.info.name
		  formData.pic = res.info.pic
		  formData.price = res.info.price
		  formData.desc = res.info.desc
		  formData.buy_url = res.info.buy_url
	  });
  };
  const getDetail = async (row: Record<string, any>) => {
  };

  const handleClose = () => {
    emit("close");
  };

  // 照片更新
  const actionImg = async () => {
    formData.pic = myref.value.fileList[0].response.data.url;
  };

  const handleSubmit = async () => {
    await formRef.value?.validate();
    await editGoodsMz(formData);
    popupRef.value?.close();
    emit('success')
  };


  defineExpose({
    open,
    setFormData,
    getDetail,
  });
</script>


<style type="text/css" scoped>
  /*.your-form-class :disabled {*/
  /*  color: black; !* 这是一个示例颜色，你可以根据需要更改 *!*/
  /*}*/
</style>
